@charset "utf-8";
@import "src/css/common";
$fontsize:64px;
//首页
html {
    font-size: $fontsize;
}

@function r($px) {
    @return $px/$fontsize*1rem;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
    .article_content {
        position: absolute;
        top: r(90px);
        bottom: r(95px);
        left: 0;
        width: 100%;
        //              height: 100%;
        overflow: auto;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        .lunbo_wrap {
            width: 100%;
            overflow: hidden;
            position: relative;
            .pic_box {
                width: 100%;
                height: 100%;
                white-space: nowrap;
                font-size: 0;
                li {
                    display: inline-block;
                    position: relative;
                    height: 100%;
                    width: 100%;
                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }
            }
            .pannel {
                position: absolute;
                left: 0;
                bottom: 1%;
                width: 100%;
                text-align: center;
                li {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: rgb(183, 183, 183);
                    margin-right: r(4px);
                }
                .active {
                    background: red;
                    border-color: red;
                }
            }
        }
        //营销文
        .article_wrap {
            width: 100%;
            height: 100%;
            font-size: 0;
            ul {
                text-align: center;
                padding-top: r(20px);
                li {
                    display: inline-block;
                    width: r(282px);
                    height: r(323px);
                    background: #f6f6f6;
                    margin-bottom: r(20px);
                    margin-right: r(25px);
                    &:nth-child(2n){
                        margin-right: 0;
                    }
                    .article_sell {
                        width: r(282px);
                        height: r(182px);
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    p {
                        font-size: r(24px);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        text-align: left;
                    }
                    .sell_like {
                        display: flex;
                            justify-content: space-between;
                             align-items: center;
                        a,span,i{
                             font-size: r(20px);
                            line-height: r(30px);
                            color: #c5c5c5;
                        }
                       
                                            
                        a {
                           
                            padding: 0 r(24px);
                            background: #b20000;
                            border-radius: r(10px);
                            color: white;
                            
                        }

                    }
                    .username {
                         display: flex;
                            justify-content: space-between;
                             align-items: center;
                        a{
                            line-height: r(35px);
                            display: flex;
                            color: #dedede;
                             img {
                            width: r(35px);
                            height: r(35px);
                            background: #dedede;
                            display: inline-block;
                        }
                        }
                       
                        span {
                            color: #dedede;
                            font-size: r(20px);
                        }
                    }
                }
            }
        }
    }
}